<template>
 <GlobalCardBox title="修改密码" :showDown="this.EDITPASSWORDDOWN" :contontStyle="browseBoxStyle">

    <div slot="content" id="content" v-if="form">
        <!-- form表单 -->
        <el-form ref="form" :model="form" label-width="100px" class="form"  :rules="rules">


            <el-form-item label="用户名" prop="newUsername">
               <el-input v-model="form.newUsername" maxlength="10" show-word-limit clearable></el-input>
            </el-form-item>


            <el-form-item label="旧密码" prop="password">
               <el-input v-model="form.password" type="password" maxlength="10" show-word-limit  show-password clearable></el-input>
            </el-form-item>

            <el-form-item label="新密码"  prop="newPassword1">
               <el-input v-model="form.newPassword1"  type="password" maxlength="10" show-word-limit show-password clearable> </el-input>
            </el-form-item>

            <el-form-item label="确认密码"  prop="newPassword2">
               <el-input v-model="form.newPassword2"  type="password" maxlength="10" show-word-limit show-password clearable></el-input>
            </el-form-item>


            <el-form-item >
              <el-button  @click="beforeSummit"  class="button">保存</el-button>
              <el-button  @click="EDITPASSWORDDOWN" >取消</el-button>
            </el-form-item>
     

        </el-form>

    </div>
</GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import common from "@/common/global"
import formRule from "@/common/rules.js"
  export default 
  {
     components: { GlobalCardBox },
     name :'', 
     computed:{
        ...mapState('Personal',['PersonalData']),
     },
     data() {
        return {
           form:null,
           browseBoxStyle:{
              width:'500px',
              height:'450px',
           },
            rules: { //表单验证规则
                newUsername:[{ validator: formRule.numberOrLetter,label:'用户名称',required:true}],
                password: [{ validator: formRule.numberAndLetter,label:'用户密码',required:true}],
                newPassword1: [
                    { validator: formRule.numberAndLetter,label:'用户密码',required:true},
                    {validator:(rule, value, callback)=>{
                                if (value == this.form.password) 
                                    callback(new Error('新旧密码不能一致!'));
                                else callback();                        
                    },required:true}
                ],
                newPassword2: [
                    { validator: formRule.numberAndLetter,label:'用户密码',required:true},
                     {validator:(rule, value, callback)=>{
                             if (value !== this.form.newPassword1) 
                                    callback(new Error('两次密码不一致!'));
                             else callback();                        
                    },required:true}
                ],
            },
        }
     },
     created(){
         this.form =Object.assign({},this.PersonalData)
         this.form.newUsername = this.form.username
     },
     methods: {
        ...mapMutations('Personal',['EDITPASSWORDDOWN','SETPERSONALDATA']),
        ...mapActions('Login',['editUser','editPassword']), //修改用户信息
        beforeSummit(){
        // if(this.form.newPassword1 == this.form.password) return this.$message.warning('旧密码不能和原密码x')
          this.$refs.form.validate((valid) => {
             if (valid) {
               this.submit()
             } else {
                return false;
            }
        });
        },
        async submit(){
           let res = await this.editPassword(this.form)
           if(res.code == 200)   { //成功
               this.$message.success(res.message)
               this.EDITPASSWORDDOWN()
               common.tokenFaile()
               return
           }
           if(res.code == -1) { //Token 解析失败
               this.EDITPASSWORDDOWN()
               common.tokenFaile()
           }
           //一般错误
           if(res.code != 200) this.$message.error(res.message)
        },

     },
  }
</script>
<style scoped lang='less'>
#content{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 10px;   
    box-sizing: border-box; 
}

</style>